<template>
  <div>
    <!--  轮播图开始  -->

    <common-carouse
      :imageUrlList="carouseList"
      :withController="true"
      :withIndicators="true"
    ></common-carouse>
    <!--  轮播图结束  -->
    <main id="main">
      <!-- 公司概况 -->
      <section class="services" v-if="overview">
        <div class="container">
          <div class="section-title">
            <h2>公司概况</h2>
          </div>
          <div class="row">
            <div
              class="col-md-6 mb-md-0 p-md-4"
              data-aos="fade-right"
              aos-easing="ease-in-sine"
              data-aos-duration="1000"
            >
              <img
                :src="imgUrl(overview.contentImg)"
                class="img-fluid"
                alt=""
              />
            </div>
            <div
              class="col-md-6 p-4 ps-md-0"
              data-aos="fade-left"
              aos-easing="ease-in-sine"
              data-aos-duration="1000"
            >
              <h5 class="mt-0 text-center">
                {{ JSON.parse(overview.contentDescription).title }}
              </h5>
              <h5 class="mt-0 text-center">
                {{ JSON.parse(overview.contentDescription).englishTitle }}
              </h5>
              <div class="description" v-html="overview.contentDetails"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 软件开发服务 -->
      <section>
        <div class="container">
          <div class="section-title">
            <h2>软件开发服务</h2>
          </div>

          <!-- <div class="row">
            <template v-for="(item, index) in servicesData" :key="index">
              <div class="col col-md-4">
                <div class="row content-box content-box-cyan">
                  <div class="col-4 content-box-icon">
                    <i :class="item.iconStyle"></i>
                  </div>
                  <div class="col-8">
                    <h4 class="fw-bold mb-0">{{ item.title }}</h4>
                    <p>
                      {{ item.description }}
                    </p>
                  </div>
                </div>
              </div>
            </template>
          </div> -->

          <div class="row row-cols-1 row-cols-md-3 g-3">
            <template v-for="(item, index) in servicesData" :key="index">
              <!-- <div class="col d-flex align-items-start">
                <i :class="item.iconStyle"></i>
                <h4 class="fw-bold mb-0">{{ item.title }}</h4>
                <p>
                  {{ item.description }}
                </p>
              </div> -->
              <div
                class="col d-flex align-items-stretch"
                data-aos="fade-up"
                data-aos-duration="1000"
              >
                <div
                  class="d-flex position-relative content-box content-box-cyan"
                >
                  <div class="content-box-icon flex-shrink-0 me-3 p-3">
                    <i :class="item.iconStyle"></i>
                  </div>
                  <div>
                    <h4 class="">{{ item.title }}</h4>
                    <p>
                      {{ item.description }}
                    </p>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </section>

      <!-- 领导团队 -->
      <section class="team">
        <div class="container">
          <div class="section-title">
            <h2>团队介绍</h2>
          </div>
          <div
            class="description"
            style=""
            data-aos="fade-up"
            data-aos-duration="1000"
          >
            我们是一支专业且实战经验丰富的团队，团队拥有超10年的互联网项目设计研发经验。团队成员以80、90后为主，既有蓬勃的朝气，又不乏沉着稳重的老将。
          </div>
          <div
            class="row row-cols-1 row-cols-md-4 g-3"
            data-aos="fade-up"
            data-aos-duration="1000"
          >
            <template v-for="(item, index) in teamLeaderList" :key="index">
              <div class="col d-flex align-items-stretch" style="">
                <div class="team1">
                  <div class="team1-img">
                    <img
                      :src="imgUrl(item.contentImg)"
                      class="w-50 h-50 rounded-circle"
                      alt="..."
                      style=""
                    />
                    <!-- <img
                      :src="
                        require('@/assets/img/blank-profile-picture-973460_640.png')
                      "
                      class="img-fluid rounded-circle"
                      alt="..."
                      style="height: 200px"
                    /> -->
                  </div>
                  <div class="team1-body" style="">
                    <h5 class="team1-person-name" style="">
                      {{ item.contentTitle }}
                    </h5>
                    <!-- 
                      <p class="team1-person-keyword">
                      {{ item.contentKeyword }}
                    </p> 
                    -->
                    <p class="team1-person-description">
                      {{ item.contentDescription }}
                    </p>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </section>

      <!-- <section
        class="team aos-init aos-animate"
        data-aos="fade-up"
        data-aos-easing="ease-in-out"
        data-aos-duration="500"
      >
        <div class="container">
          <h2 class="section-title">团队介绍</h2>
          <div class="row row-cols-1 row-cols-md-4 g-4">
            <template v-for="(item, index) in teamLeaderList" :key="index">
              <div class="col d-flex align-items-stretch">
                <div class="team1" style="width: 100%">
                  <div class="team1-img">
                    <img :src="imgUrl(item.contentImg)" class="w-50 h-50" alt="..." />
                  </div>
                  <div class="team1-body">
                    <h5 class="team1-person-name" style="">
                      {{ item.contentTitle }}
                    </h5>
                    <p class="team1-person-keyword">
                      {{ item.contentKeyword }}
                    </p>
                    <p class="team1-person-description">
                      {{ item.contentDescription }}
                    </p>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </section> -->

      <!-- 合作伙伴 -->
      <section class="">
        <div class="container">
          <div class="section-title">
            <h2>合作伙伴</h2>
          </div>

          <div class="row" data-aos="fade-up" data-aos-duration="1000">
            <div class="col">
              <img
                :src="require('@/assets/img/partner.png')"
                class="img-fluid"
                alt=""
              />
            </div>
          </div>
        </div>
      </section>
      <!-- End Features Section -->
    </main>
    <!-- End #main -->
  </div>
</template>

<script>
// <div
//   id="carouselExampleIndicators"
//   class="carousel slide"
//   data-bs-ride="carousel"
// >
//   <div class="carousel-indicators">
//     <button
//       type="button"
//       data-bs-target="#carouselExampleIndicators"
//       data-bs-slide-to="0"
//       class="active"
//       aria-current="true"
//       aria-label="Slide 1"
//     ></button>
//     <button
//       type="button"
//       data-bs-target="#carouselExampleIndicators"
//       data-bs-slide-to="1"
//       aria-label="Slide 2"
//     ></button>
//   </div>
//   <div class="carousel-inner">
//     <div class="carousel-item active">
//       <img
//         :src="require('@/assets/img/banner/banner-3-1280.png')"
//         class="d-block w-100"
//         alt="..."
//       />
//     </div>
//     <div class="carousel-item">
//       <img
//         src="https://tse1-mm.cn.bing.net/th/id/R-C.e4ad2d35c19797b68c133649bd40f131?rik=yHykwfVeVebx5g&riu=http%3a%2f%2fwww.codeofaninja.com%2fwp-content%2fuploads%2f2014%2f05%2fbootstrap-tutorial-for-beginners.jpg&ehk=wdiPpb9yk76qpUeXHSD6i4aZK6btLND%2f2U0bLKIUKpU%3d&risl=&pid=ImgRaw&r=0"
//         class="d-block w-100"
//         alt="..."
//       />
//     </div>
//   </div>
//   <button
//     class="carousel-control-prev"
//     type="button"
//     data-bs-target="#carouselExampleIndicators"
//     data-bs-slide="prev"
//   >
//     <!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
//     <div
//       style="
//         display: inline-block;
//         width: 3rem;
//         height: 3rem;
//         background-repeat: no-repeat;
//         background-position: 50%;
//         background-size: 100% 100%;
//       "
//     >
//       <i
//         class="bi bi-arrow-left-circle"
//         style="color: black; font-size: 3rem"
//       >
//       </i>
//     </div>
//     <span class="visually-hidden">Previous</span>
//   </button>
//   <button
//     class="carousel-control-next"
//     type="button"
//     data-bs-target="#carouselExampleIndicators"
//     data-bs-slide="next"
//   >
//     <!-- <span
//       class="carousel-control-next-icon border border-2 rounded-circle"
//       aria-hidden="true"
//     ></span> -->
//     <div
//       style="
//         display: inline-block;
//         width: 3rem;
//         height: 3rem;
//         background-repeat: no-repeat;
//         background-position: 50%;
//         background-size: 100% 100%;
//       "
//     >
//       <i
//         class="bi bi-arrow-right-circle"
//         style="color: black; font-size: 3rem"
//       >
//       </i>
//     </div>
//     <span class="visually-hidden">Next</span>
//   </button>
// </div>

import { IndexData } from "@/assets/js/data.js";
import { imgUrl } from "@/api/index.js";

import { mapActions, mapGetters } from "vuex";

import CommonCarouse from "@/components/common/CommonCarouse.vue";

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "Index",
  components: {
    CommonCarouse,
  },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const data = reactive({
      profileData: IndexData.ProfileData,
      servicesData: IndexData.ServicesData,
      solutionData: IndexData.SolutionData,
      serviceProcessData: IndexData.serviceProcessData,
      imageUrlList: [
        {
          url: "https://tse1-mm.cn.bing.net/th/id/R-C.e4ad2d35c19797b68c133649bd40f131?rik=yHykwfVeVebx5g&riu=http%3a%2f%2fwww.codeofaninja.com%2fwp-content%2fuploads%2f2014%2f05%2fbootstrap-tutorial-for-beginners.jpg&ehk=wdiPpb9yk76qpUeXHSD6i4aZK6btLND%2f2U0bLKIUKpU%3d&risl=&pid=ImgRaw&r=0",
        },
        {
          url: require("@/assets/img/banner/banner-3-1280.png"),
        },
      ],
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.initData();
    });
    //
    const computedData = {
      carouseList: computed(() => {
        var carouseList = proxy.$store.getters.getCarouseList;
        if (!carouseList) {
          return;
        }
        var imgUrlList = [];
        for (var i = 0, len = carouseList.length; i < len; i++) {
          if (imgUrl(carouseList[i].contentImg)) {
            imgUrlList.push({ url: imgUrl(carouseList[i].contentImg) });
          }
        }
        return imgUrlList;
      }),
      overview: computed(() => {
        return proxy.$store.getters.getOverview;
      }),
      scopeList: computed(() => {
        return proxy.$store.getters.getScopeList;
      }),
      teamLeaderList: computed(() => {
        return proxy.$store.getters.getTeamLeaders;
      }),
    };

    //自定义方法
    const methods = {
      imgUrl,
      initData: () => {
        //
        if (proxy.$store.state.carouseList == null) {
          proxy.$store.dispatch("getCarouseList", null);
          console.log("getCarouseList");
        }

        //
        if (proxy.$store.state.overview == null) {
          proxy.$store.dispatch("getOverview", null);
        }

        if (proxy.$store.state.scopeList == null) {
          proxy.$store.dispatch("getScopeList", null);
        }

        if (!proxy.$store.state.teamLeaderList) {
          proxy.$store.dispatch("getTeamLeaders", null);
        }
      },
    };
    //
    return {
      ...refData,
      ...methods,
      ...computedData,
      //
    };
  },
};
</script>
<style lang="scss" scoped>
.content-box {
  padding: 30px;
  background: #fff;
  box-shadow: 0 5px 26px 0 rgba(68, 88, 144, 0.14);
  transition: all 0.3s ease-in-out;
  // text-align: center;
  border: 1px solid #fff;
  border-radius: 20px;
  width: 100%;

  .content-box-icon {
    padding-top: 17px;
    display: inline-flex;
    justify-content: center;
    border-radius: 50%;
    width: 72px;
    height: 72px;

    i {
      font-size: 1.5rem;
      // line-height: 1;
    }
  }
}

.content-box-cyan {
  .content-box-icon {
    background: #e6fdfc;

    i {
      color: #3fcdc7;
    }
  }
}

//团队样式
.team {
  .description {
    text-align: center;
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 40px;
  }
}

.team .team1 {
  width: 100%;
  border: 2px solid #003366;
  border-radius: 10px;

  .team1-img {
    padding: 1rem;
    display: flex;
    justify-content: center;
    vertical-align: middle;
  }
  .team1-body {
    margin: 1rem 0;
    text-align: center;
    width: 100%;

    h5.team1-person-name {
      font-weight: 500;
    }

    h5 {
    }

    h5::after {
    }

    p.team1-person-keyword {
      font-size: 1rem;
      font-weight: 300;
      margin-bottom: 10px;
      padding-bottom: 10px;
      position: relative;
    }

    p.team1-person-keyword::after {
      content: "";
      position: absolute;
      display: block;
      width: 40px;
      height: 3px;
      background: #68a4c4;
      bottom: 0;
      left: calc(50% - 20px);
    }

    .team1-person-description {
      font-size: 0.9rem;
    }
  }
}
</style>
